<template>
  <!-- <nav-header title="登录" showBack></nav-header> -->
  <view class="login-container">
    
    <!-- logo -->
    <image class="intro-image" src="/static/images/dog.png"></image>

    <!-- 标题 -->
    <view>
      <view class="intro-text">张帅卡卷</view>
    </view>

    <!-- 登录/注册表单 -->
     <view class="login-prompt">
      <view class="form-box">
        <!-- 卡号输入框 -->
        <view class="input-item">
          <text class="label">账号</text>
          <input v-model="form.username" placeholder="请输入账号" class="input" />
        </view>

        <!-- 卡密输入框 -->
        <view class="input-item">
          <text class="label">密码</text>
          <input v-model="form.password" placeholder="请输入密码" class="input" />
        </view>

        <!-- 确认提交按钮 -->
        <button class="submit-button" @click="handleSubmit">登录</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue'
import {loginApi} from '@/api/user'
import {userStore} from '@/stores/modules/userStore'
import {showError, showSuccess} from '@/utils/feedback'
import NavHeader from '@/components/NavHeader.vue'
const user = userStore()
const form = reactive({
  username : '',
  password : ''
})
const handleSubmit = async() => {
  // 提交表单逻辑
  if (!form.username) {
    showError('请输入账号')
    return;
  }
  if (!/^[0-9a-zA-Z]+$/.test(form.username)) {
    showError('账号只能包含字母数字')
    return;
  }
  if (!form.password) {
    showError('请输入密码')
    return;
  }
  
  if (!/^[0-9a-zA-Z]+$/.test(form.password)) {
    showError('密码只能包含字母数字')
    return;
  }
  try {
    const res = await loginApi(form)
    if (res.code == 200) {
      user.setUserInfo(res.data);
      showSuccess(res.message)
      setTimeout(() => {
        uni.switchTab({ url: '/pages/my/index' })
      }, 1000);
    } else {
      showError(res.message)
    }
  } catch (error) {
    showError(error.message)
  }
};
</script>
<style scoped lang="scss">
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 20px;
}

.intro-image {
  width: 80px;
  height: 80px;
}

.intro-text {
  font-size: 30px;
  color: #333;
  font-weight: bold;
}
.login-prompt {
  width: 100%;
  padding: 10px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  gap:20px;
  border-radius: $uni-border-radius-base;;

  .form-box {
    display: flex;
    flex-direction: column;
    gap: 20px;

    .input-item {
      display: flex;
      flex-direction: column;
      gap: 10px;
      .label {
        font-size: 20px;
        color: #333;
        text-align: left;
      }

      .input {
        flex: 1;
        height: 30px;
        background-color: #f5f5f5;
        border: none; 
        border-radius: $uni-border-radius-base;; 
        padding: 20px;
        font-size: 16px;
        color: #333; 
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);

        &::placeholder {
          color: #999;
        }
      }
    }

    .submit-button {
      width: 100%;
      background-color: $color-primary;
      color: #fff;
      border: none;
      border-radius: $uni-border-radius-base;;
      font-size: 16px;
      padding: 10px 0;
      margin-top: 20px;
    }
  }
}

</style>